<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        class MyEvent {
            constructor() {
                this.clientList = []
            }
            listen(key, fn) {
                if (!this.clientList[key]) {
                    this.clientList[key] = []
                }
                this.clientList[key].push(fn)
            }
            trigger() {
                var key = Array.prototype.shift.call(arguments),
                    fns = this.clientList[key]
                res = []
                for (let i = 0; i < fn.length; i++) {
                    res.push(fns[i].apply(this, arguments))
                }
                return res
            }
        }


        var strategies = {
            isNotEmpty: function (val, errMsg) {
                if (val === "") {
                    return errMsg
                }
                return val
            },
            minLength: function (val, len, errMsg) {
                if (val.length < len) {
                    return errMsg
                }
                return val
            },
            mobileForamt: function (val, errMsg) {
                if (!/^1[3|5|8][0-9]{9}$/.test(val)) {
                    return errMsg
                }
                return val
            }

        }


        class Validator {
            constructor() {
                this.cache = []
            }
            add(dom, rules) {
                rules.forEach(rule => {
                    var strategyArr = rule.strategy.split(":"),
                        errMsg = rule.errMsg

                    this.cache.push(function () {
                        var strategy = strategyArr.shift()
                        strategyArr.unshift(dom.value)
                        strategyArr.push(errMsg)
                        return strategies[strategy].apply(dom, strategyArr)
                    })
                })
            }
            start() {
                return this.cache.map((item) => {
                    return item()
                })
            }
        }
    </script>
</body>

</html>